
import React, { useEffect, useState } from "react";
import { ContainerRow, StyledContainer } from "./styled";
import { BorderBox1, BorderBox7, CapsuleChart, ScrollRankingBoard } from '@jiaminghi/data-view-react';
import RelativeJSON from '@/configs/index.json';
import JSMapCharts from "@/components/LineCharts/JSMapCharts";
import LineCharts from "@/components/LineCharts/LineCharts";
import StationDetail, { Title } from "./StationDetail";


interface IProps {
    area?: string;
}

const Magnetic = (_props: IProps) => {

    const [ deviceHitch, setDeviceHitch ] = useState<any>({});
    const [ download, setDownload ] = useState<any>({});
    const [ userActive, setUserActive ] = useState<any>({});
    const [ abNums, setAbNums ] = useState<any>({});
    const [ abNumsYear, setAbNumsYear ] = useState<any>([]);
    const [ currentCity, setCurrentCity ] = useState<string>('');
    

    useEffect(() => {
        const hitchData: any = [];
        const downloadData: any = [];
        const userActiveData: any = [];
        const abNumsData: any = [];

        Object.keys(RelativeJSON.citys).forEach((location) => {
            hitchData.push({
                name: location,
                value: RelativeJSON.citys[location].deviceHitchTotal,
            });
            downloadData.push({
                name: location,
                value: RelativeJSON.citys[location].downloadTotal,
            })
            userActiveData.push({
                name: location,
                value: RelativeJSON.citys[location].userActiveTotal,
            })
            abNumsData.push({
                name: location,
                value: RelativeJSON.citys[location].stationList.reduce((prev, cur) => prev + cur.abnMonthTotal, 0),
            })
        });

        setDeviceHitch({
            data: hitchData
        });
        setDownload({
            data: downloadData,
            rowNum: 6,
        });
        setUserActive({
            data: userActiveData,
            rowNum: 6,
        })
        setAbNums({
            data: abNumsData,
            rowNum: 6,
        })
        setAbNumsYear([
            {
                type: 'line',
                smooth: true,
                showSymbol: false,
                areaStyle: {
                    opacity: 0.1
                },
                data: RelativeJSON.abnYearsTotal,
            },
        ])

        const hashchangeCallback = (event) => {
            const { newURL } = event;
            if (newURL.indexOf('#') > 0) {
                const location = newURL.substring(newURL.indexOf('#') + 1, newURL.length);
                setCurrentCity(decodeURIComponent(location))
            } else setCurrentCity('')
        } 

        window.addEventListener('hashchange', hashchangeCallback)

        return () => {
            window.removeEventListener('hashchange', hashchangeCallback);
        }
    }, [])

    const onAreaSelected = (location: string) => {
        window.location.hash = location;
    }

    return (
            currentCity === '' ?
            <StyledContainer>
                <ContainerRow style={{ marginBottom: '12px', height: 'calc(60% - 12px)' }}>
                    <BorderBox7 className="decorate" style={{ width: '25%' }}>
                        <Title title="月设备故障次数"/>
                        <CapsuleChart config={deviceHitch} style={{ width: '100%', height: "calc(100% - 36px)"}} />
                    </BorderBox7>
                    <BorderBox1 style={{ width: '50%', margin: '0px 12px' }}>
                        <JSMapCharts style={{ width: 'calc(100% - 36px)', height: 'calc(100% - 18px)', margin: '18px 18px', borderRaidus: '12px' }} isDeviceShow={false} id='jsmap' onAreaClick={onAreaSelected}/>
                    </BorderBox1>
                    <BorderBox7 className="decorate" reverse="true" style={{ width: '25%' }}>
                        <Title title="月台站异常次数"/>
                        <CapsuleChart config={abNums} style={{ width: '100%', height: "calc(100% - 36px)"}} />
                    </BorderBox7>
                </ContainerRow>
                <ContainerRow height="40%">
                    <BorderBox7 className="decorate" style={{ width: '25%' }}>
                        <Title title="月数据下载次数"/>
                        <ScrollRankingBoard config={download} style={{ width: '100%', height: "calc(100% - 36px)"}} />
                    </BorderBox7>
                    <BorderBox7 className="decorate" style={{ width: '50%', margin: '0px 12px' }}>
                        <Title title="台站总年度异常次数"/>
                        <LineCharts id="abnYearTotal"  style={{ height: 'calc(100% - 16px)' }} data={abNumsYear}/>
                    </BorderBox7>
                    <BorderBox7 className="decorate" style={{ width: '25%' }}>
                        <Title title="月用户活跃度"/>
                        <ScrollRankingBoard config={userActive} style={{ width: '100%', height: "calc(100% - 36px)"}} />
                    </BorderBox7>
                </ContainerRow>
            </StyledContainer> :
            <StationDetail city={currentCity} data={RelativeJSON}/>
    )
};

export default Magnetic;